// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', () => {
    // 获取页面上的DOM元素
    const inputText = document.getElementById('inputText');
    const resultDiv = document.getElementById('result');
    const convertButton = document.getElementById('convertButton');
    const printButton = document.getElementById('printButton');

    // 绑定按钮事件：转换按钮触发拼音转换，打印按钮触发打印功能
    convertButton.addEventListener('click', convertToPinyin);
    printButton.addEventListener('click', () => window.print());

    /**
     * 将输入的中文文本转换为带拼音注音的格式
     * 检查输入是否为空，然后按段落处理文本
     */
    function convertToPinyin() {
        const text = inputText.value;
        if (!text.trim()) {
            alert('请输入中文文本');
            return;
        }

        // 将文本按换行符分割成段落数组
        const paragraphs = text.split('\n');
        const resultHtml = processTextToPinyin(paragraphs);
        resultDiv.innerHTML = resultHtml;
    }

    /**
     * 处理文本段落，将其转换为带拼音的HTML格式
     * @param {string[]} paragraphs - 要处理的文本段落数组
     * @returns {string} - 生成的HTML字符串
     */
    function processTextToPinyin(paragraphs) {
        return `<div>${
            paragraphs
                .map((paragraph, index) => {
                    // 跳过空段落
                    if (!paragraph.trim()) return '';
                    
                    // 将段落拆分成字符数组
                    const chars = Array.from(paragraph);
                    // 使用pinyin-pro库获取拼音数组，设置为带声调的符号格式
                    const pinyinArray = pinyinPro.pinyin(paragraph, {
                        toneType: 'symbol',  // 使用声调符号
                        type: 'array'        // 返回数组格式
                    });

                    // 处理每个字符，生成带拼音的ruby标记
                    return chars
                        .map((char, idx) => {
                            if (!char.trim()) return char;  // 保留空白字符
                            if (/[\p{P}]/u.test(char)) return char;  // 保留标点符号
                            return `<ruby>${char}<rt>${pinyinArray[idx]}</rt></ruby>`;  // 生成带拼音的HTML结构
                        })
                        .join('');
                })
                .filter(Boolean)  // 过滤掉空字符串
                .join('<br>')     // 段落之间添加换行
        }</div>`;
    }
});